{extend name="main/index" /}
{block name="main"}
<style>
    table, table tr th, table tr td {
        border: 1px solid #0094ff;
        text-align: center;
    }

    table {
        width: 200px;
        min-height: 25px;
        line-height: 25px;
        text-align: center;
        border-collapse: collapse;
        margin: 0 auto;
        margin-top: 50px;
        font-size: 12px;
        width: 800px;
        height: 100px;
    }

    /*初始化样式*/
    * {
        list-style: none;
        margin: 0;
        padding: 0;

    }

    h1 h3 {
        text-align: center;
    }

    #editbox {
        display: none;
        background: white;
    }

    #font {
        font-size: 20px;
    }

    h2 {
        display: none;
    }
</style>

<!-- Start right content -->
<div class="content-page">
    <div class="content">
        <h1><i class='fa fa-table'></i>{$title} <h3><a href="{:url('admin/role/addrole')}">{$add}</a></h3></h1>
        <table>
            <tr>
                <th>编号</th>
                <th>角色名</th>

                <th>状态</th>

                <th>操作</th>

            </tr>
            {volist name="list" key="k" id="v" }
            <tr>
                <td>{$v['id']}</td>
                <td>{$v['role']}</td>

                <td>
                    <a href="{:url('admin/role/status',['id'=>$v['id']])}">
                        {if condition="$v['status'] eq '1'"}
                        启用
                        {else/}
                        禁用
                        {/if}
                    </a>
                </td>

                <td><a href="">删除</a> <a href="">修改</a>
                    <button id="{$v['id']}" onclick="assigna(this)">分配权限</button>
                </td>
            </tr>
            {/volist}
        </table>

        <div id="editbox">
            <!--            <div id="font">为【<span></span>】分配权限</div>-->
            <h2></h2>
            <!--                    放 js显示出来的  input框-->
            <div id="box"></div>
            <button onclick="doassigna(this)">确认</button>
        </div>


        <script src="/static/admin/assets/js/jquery-3.3.1.min.js"></script>

        <script>
            /**
             * @param id
             */

            function assigna(id) {
                //点击的时候 要先清除 为 ''
                $('#box').html("");

                //点击编辑 出现 编辑框框
                editbox.style.display = 'block';

                var id = id.id;
                // console.log(id);
                //点击分配权限 查询该角色所有 权限
                $.ajax({
                    method: 'get',
                    url: 'admin/Role/assigna/' + id,
                    datatype: 'json',
                    success: function (data) {

                        // console.log(data);


                        $('span').html(data['role']);
                        $('h2').html(data['rid']);
                        // $('h3').html(data['aid']);

                        // console.log(data['role']);
                        // console.log(data);
                        //这里获取到了 数组 arr  是  该角色对应的权限  然后需要判断  在多选框打√
                        // 角色已有权限
                        var arr = data['arr'];
                        // 所有权限  拿来对比
                        var arrAll = data['arrAll'];
                        // console.log(arr);
                        // console.log(arrAll);
                        var aid = data['aid'];
// console.log(aid);
                        // 对比 打√
                        for (var i = 0; i < arrAll.length; i++) {
                            //判断 checked
                            // 判断 arrAll数组中 有 arr 的话 就 打√
                            var checked = jQuery.inArray(arrAll[i], arr) >= 0 ? "checked" : "";
                            // console.log(checked);
                            //这里需要 value =  权限名   aid
                            $('#box').append("<input  value=" + aid[i] + " type='checkbox'" + checked + ">" + arrAll[i]);
                        }
                    },
                    error: function (data) {
                        alert('查看失败,该角色无权限');
                    }
                });
            }

            /**
             * 添加分配的权限
             */
            function doassigna() {
                //获取 √选  权限  所有 aid   和 该角色的  rid   以数组形式传给 php
                var input = document.getElementsByTagName('input');
                // 角色id
                var rid = $('h2').html();
                // 权限id
                var aid = [];
                for (var i = 0; i < input.length; i++) {

                    // console.log(aid);
                    if (input[i].checked) {
                        aid.push(input[i].value);
                        // console.log(input[i].value);
                    }
                }
                // console.log(aid);
                // console.log(rid);

                $.ajax({
                    method: 'post',
                    url: 'admin/Role/doassigna',
                    data: {
                        "rid": rid,
                        "aid": aid
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data['msg'] == '您没有权限') {
                            alert('您没有权限');
                            editbox.style.display = 'none';
                        }
                        console.log(data);
                        if (data == 1) {
                            alert('分配成功');
                            editbox.style.display = 'none';

                        }
                    },
                    error: function () {
                        alert('分配失败');
                        editbox.style.display = 'none';

                    }
                })


            }


        </script>

    </div>
</div>
{/block}